import React from 'react';
import ReactDOM from 'react-dom';
import { Picker, List , DatePicker,InputItem} from 'antd-mobile';
import { FormattedMessage } from 'react-intl';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';
import RowInput from './Item/Input';
import Job from '../pages/product/job';
import calData from './calData'
import trial from'../pages/poc-YJ/trial'

const ListItem = List.Item;
let minDate1 = new Date()
minDate1.setDate(minDate1.getDate() + 1)
let maxDate1 = new Date()
maxDate1.setMonth(maxDate1.getMonth() + 1) 

class PickerDom extends React.Component { 
    constructor(props) {
        super(props);
        this.state={
            pickval:this.props.pickval || [] ,
            date: this.props.date || new Date('1990-01-01'),
            //amount:0,           
            datasource:[],
            unit:1,
            staff:{employeeNumberCategory123:'',employeeNumberCategory4:'',zrxSA:'100000',ccxSA:'100000'},
            subNum:{},  
            policyEffectDate:minDate1       
        }
    }
    componentDidMount(){
         // 根据goodid 判断是哪个商品  13=ELA  14=ESA 15=HJK
        const goodId = T.urlQuery("goodId");
        let datasource = calData(goodId)
           
        let pickval = [];
        for(var i = 0; i<datasource.length; i++){ //頁面進來初始化默認選中第一個值
            pickval.push({key:datasource[i].key,val:[datasource[i].data[0].value]});
        }
         this.setState({
            datasource:datasource,
            pickval:pickval
        }) 
    }
    
    calPremium=(pickval,date,policyEffectDate)=>{ //保费试算 
        const goodId = T.urlQuery('goodId')
        let paramsobj = {};      
         for(var i = 0;i<pickval.length;i++){                  
                if( pickval[i].key == "birthday"){ 
                    pickval.splice(i,1)
                }           
        }       
        if(date ||  goodId != '63002'){ //出生日期 
            let  time = T.formatDate("yyyy-MM-dd",new Date(this.state.date)) +' 00:00:00'
            pickval.push({key:'birthday',val:time});
        }
        if(policyEffectDate || goodId == '128011' || goodId == '61002' || goodId=='62001'){
            let  time = T.formatDate("yyyy-MM-dd",new Date(this.state.policyEffectDate))+' 00:00:00'; 
            pickval.push({key:'policyEffectDate',val:time});
        } 
        this.setState({
            pickval:pickval           
        });
        for(var i = 0;i<pickval.length;i++){
            paramsobj[pickval[i].key]= pickval[i].val.toString();               
        }
        if(paramsobj.hasOwnProperty('birthday')){           
            paramsobj.birthday =paramsobj.birthday
        }
        if(paramsobj.hasOwnProperty('policyEffectDate')){           
            paramsobj.policyEffectDate = paramsobj.policyEffectDate
        }       
        if(goodId == '137052' || goodId =='63002'){
            paramsobj.subjectCode = '6B'
            paramsobj.hasWaterDamageRisk = '2'
        }    
      
        let params = {
        "channelGoodsId" : T.urlQuery('channelGoodsId'), //渠道商品计划
        "channelPlanId" : this.props.id, //渠道计划ID
        "factorParams" : paramsobj
        };         
        trial.trialPrice(params,this.props.getAmount)   
        sessionStorage.setItem("calculateVals",  JSON.stringify(paramsobj)); //试算因子放缓存session  
    }

    onchange=(value,key)=>{ //每次改變時間之外的選中值的處理   
        let pickval = this.state.pickval;        
        for(var i = 0;i<pickval.length;i++){                  
            if(pickval[i].key == key){
                pickval.splice(i,1)
            }           
        }       
        pickval.push({key:key,val:value}); 
        this.calPremium(pickval);
    }

    changeValue=(key)=>{ //每次选中值处理  包括页面一进来的值初始化处理
        const pickval =  this.state.pickval; 
        const obj = T.getAttrObject(pickval,"key",key)[0];
        let val = [];
        if(obj){
           val = obj.val
        } 
        return val;
    }

   changeDate=(date)=>{ //每次改变日期做的處理
       this.setState({date:date},()=>{
        this.calPremium(this.state.pickval,date);  
       })       
   }
   onChangeUnit=(obj)=>{
        this.setState(obj);        
        this.calPremium(this.state.pickval,this.state.date,obj.unit);
   }
   onChangeJob=(obj)=>{
       this.setState(obj);       
       this.calPremium(this.state.pickval,this.state.date,this.state.unit,obj.damageLevel);
   }
   onChangeStaff=(obj)=>{
        Object.assign(this.state.staff, obj)
        this.setState({staff: this.state.staff})
        this.calPremium(this.state.pickval,'','','',this.state.staff);
        this.calculateSubNum(obj);
   }

   calculateSubNum = (obj)=>{ //计算其他子保额
    let subs = {};
    if(obj.hasOwnProperty("zrxSA")){           
        subs = {
            sub1:obj.zrxSA,
            sub2:Number(obj.zrxSA) * 0.15,
            sub3:'50人/天'
        } 
        Object.assign(this.state.subNum,subs);          
    }
    if(obj.hasOwnProperty("ccxSA")){
        subs = {
            sub4:obj.ccxSA,
            sub5:obj.ccxSA                
        }  
        Object.assign(this.state.subNum,subs);         
    }        
    this.setState({subNum:this.state.subNum});
}

changeEffectDate=(date)=>{
    this.setState({
        policyEffectDate:date
    },()=>{
        this.calPremium(this.state.pickval,this.state.date,date)
    })    
}


    render() {       
        const minDate = new Date('1901-01-01');   
        const goodId = T.urlQuery("goodId"); 
                  
        return(
             <List>	
             	{this.state.datasource.map((item,index)=><Picker locale={enUs}             
                 data={item.data} cols={1} value={this.changeValue(item.key)} key={item.key}  onChange={(value)=>this.onchange(value,item.key)}>
					<ListItem arrow="horizontal">{item.name}</ListItem>
                </Picker>)} 
                {(goodId != '108004' && goodId != '130005' && goodId != '137052' && goodId != '63002')  &&   
                    <DatePicker
                        locale={enUs}
                        mode="date"
                        title="choose date"
                        extra="Optional"
                        minDate={minDate}
                        value={this.state.date}  
                        key="age"
                        onChange={(date) => this.changeDate(date)}
                        >                
                        <List.Item arrow="horizontal">生年月日{/*<FormattedMessage id="date_of_birth" defaultMessage="出生日期"/>*/}</List.Item>
                    </DatePicker>
                }
                {(goodId == '128011' || goodId=='61002' || goodId=='62001') &&
                    <DatePicker
                    locale={enUs}
                    mode="date"
                    title="choose date"
                    extra="Optional"
                    minDate={minDate1}
                    maxDate={maxDate1}
                    value={this.state.policyEffectDate}  
                    key="policyEffectDate"
                    onChange={(date) => this.changeEffectDate(date)}
                    >                
                    <List.Item arrow="horizontal">発効日</List.Item>
                    </DatePicker>
                }
                {(goodId == '2' || goodId == '9' )&&
                    <RowInput label={window.LangMessage.unit || "份数"} name="unit"  value={this.state.unit} callback={this.onChangeUnit} />
                }  
                {
                    goodId == '9' ? (<Job callback={this.onChangeJob} />) : null
                }    
                {
                    goodId == '108004' && 
                    <div className="long">
                        <RowInput label="1-3类职业雇员人数" name="employeeNumberCategory123"  value={this.state.staff.employeeNumberCategory123} callback={this.onChangeStaff} />
                        <RowInput label="4类职业雇员人数" name="employeeNumberCategory4"  value={this.state.staff.employeeNumberCategory4} callback={this.onChangeStaff} />
                        <RowInput label="雇主责任险保额" name="zrxSA"  value={this.state.staff.zrxSA} callback={this.onChangeStaff} />
                        <div className="subInput">
                            <RowInput label="工伤及职业病身故/伤残" name="sub1" language="English"  value={this.state.subNum.sub1} disabled={true}/>
                            <RowInput label="医疗费用报销" name="sub2" language="English"  value={this.state.subNum.sub2} disabled={true}/>
                            <RowInput label="误工津贴" name="sub3"  language="English" value={this.state.subNum.sub3} disabled={true}/>                            
                        </div>
                        <RowInput label="财产险保额" name="ccxSA"  value={this.state.staff.ccxSA} callback={this.onChangeStaff} />
                        <div className="subInput">
                            <RowInput label="店内财产保障" name="sub4" language="English"  value={this.state.subNum.sub4} disabled={true}/>
                            <RowInput label="店内现金保障" name="sub5" language="English"  value={this.state.subNum.sub5} disabled={true}/>                                                        
                        </div>
                    </div>
                }   	
			 </List>
        )
    }
}

export default PickerDom;